<template>
  <div>
    <div v-if="meta.indexOf('TeacherLevelHandle') > -1" class="doumee_table_header">
      <el-button type="primary" @click="showAdd()">{{ $t('message.add') }}</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table doumee-element-tableb">
      <el-table-column align="center" :label="$t('message.djmc')" prop="levelName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.ygljls')" prop="relevanceNum" min-width="110" show-overflow-tooltip />
      <el-table-column align="center" prop="creator" :label="$t('message.cjr')" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.createTime')" prop="createTime" min-width="160" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.sort')" prop="sortNum" min-width="80" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.caozuo')" min-width="150" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="meta.indexOf('TeacherLevelHandle') > -1" v-preventReClick type="text" @click="showAdd(scope.row)">{{ $t('message.edit') }}</el-button>
          <el-button v-if="meta.indexOf('TeacherLevelRemove') > -1" v-preventReClick type="text" @click="rowDel(scope.row)">{{ $t('message.del') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :total="total" :page="pagination.page" @SizeChange="pageSizeChange" @current-change="getList" />

    <el-drawer ref="showAddRef" :title="$t('message.xzjldj')" :visible.sync="isShowAdd" :before-close="closeDrawer" size="50%">
      <el-form ref="addformRef" class="doumee-form" :rules="addRuler" :model="addForm" label-width="auto" label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.djmc')" prop="levelName">
          <el-input v-model="addForm.levelName" type="text" :placeholder="$t('message.qsr') + $t('message.djmc')" class="w400" />
        </el-form-item>
        <el-form-item :label="$t('message.sort')">
          <el-input v-model="addForm.sortNum" type="text" onkeyup="value=value.replace(/[^\d^]/g,'')" class="w400" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="true" :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
          <el-button @click="closeDrawer">{{ $t('message.qx') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  teacherLevelListPost,
  editOrAddLevelPost,
  delLevelPost
} from '@/api'
export default {
  components: {
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      list: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,

      isShowAdd: false,
      subLoading: false,
      addForm: {},
      addRuler: {
        levelName: [{ required: true, message: this.$t('message.qsr') + this.$t('message.djmc'), trigger: 'blur' }]
      }
    }
  },
  created () {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  methods: {
    showAdd (row) {
      this.addForm = row || {}
      this.isShowAdd = true
    },
    closeDrawer () {
      this.isShowAdd = false
    },
    onSubmit () {
      this.$refs['addformRef'].validate((valid) => {
        if (valid) {
          const param = { ...this.addForm }
          this.subLoading = true
          editOrAddLevelPost({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success(this.$t('message.tjcg'))
            this.getList()
            this.isShowAdd = false
          }, () => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    rowDel (row) {
      this.$confirm(this.$t('message.scjldjtc'), this.$t('message.ts'), {
        type: 'warning'
      }).then(res => {
        delLevelPost({
          param: { id: row.id }
        }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.$t('message.delcg'))
          let totalPage = Math.ceil((this.total - 1) / this.pagination.rows)
          let currentPage = this.pagination.page > totalPage ? totalPage : this.pagination.page
          this.pagination.page = currentPage < 1 ? 1 : currentPage
          this.getList(this.pagination.page)
        })
      })
    },
    pageSizeChange (val) {
      this.pagination.rows = val
      this.getList(1)
    },
    // 清空
    clear () {
      this.filters = {}
      this.getList(1)
    },
    getList (page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      this.listLoading = true
      teacherLevelListPost({
        pagination, param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.vip-info {
  display: flex;
  justify-content: center;
  .name-phone {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-left: 10px;
    flex: 1;
  }
}
</style>
